<template>
	<view class="navbar" :class="{fixed: fixed}">
		<image class="navbar-back" :class="{black:isBlack}" src="/static/imgs/back.png" @click="goBack" />
		<!-- <text class="navbar-back" @click="goBack"></text> -->
		<text v-if="title" class="navbar-title">{{title}}</text>
		<slot />

	</view>
</template>

<script setup name="Navbar">
	import {
		navigateBack,
		navigateTo
	} from '@/utils/index.js'
	// 定义组件接收的props
	const props = defineProps({
		title: { // 标题文字
			type: String,
			default: ""
		},
		isBlack: { // 标题颜色是否为黑色
			type: Boolean,
			default: false
		},
		fixed: { // 标题是否固定在顶部
			type: Boolean,
			default: false
		},
		url: { // 点击标题时的跳转链接
			type: String,
			default: ""
		}

	})

	/**
	 * 处理返回操作，如果定义了url则跳转到url，否则执行返回上一页的操作
	 */
	const goBack = () => {
		if (props.url) navigateTo(props.url) // 判断是否有跳转链接，有则跳转
		else navigateBack() // 无跳转链接则返回上一页
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		color: #ffffff;
		position: relative;

		&.fixed {
			position: fixed;
			top: 0;
			left: 0
		}

		&-back {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0rpx;
			margin: auto;
			height: 60rpx;
			width: 94rpx;
			cursor: pointer;

			&.black {
				filter: brightness(0%);
			}
		}

		&-title {
			font-size: 40rpx;
			font-family: PINGFANG-BOLD;
		}
	}
</style>